<template>
  <div class="biaosheng">
<!--    <h1>横板-这是飙升榜内容</h1>-->
    <ul class="align">
      <li v-for="(item,index) in list" @click="changeborder(index)" :class="{current:index==num}">
        <router-link :to="list[index].path">
          {{item.title}}
        </router-link>
      </li>
    </ul>
    <router-view></router-view>
  </div>
</template>

<script>
    export default {
        // name: "biaosheng"
      data(){
        return{
          num:0,
          list:[
            {
              title: "总榜",
              num: '0',
              path: "/Two_hot_one"
            },
            {
              title: "新品",
              num: '1',
              path: "/Two_youshengshu_one"
            },
            {
              title: "有声书",
              num: '2',
              path: "/Two_hot_one"
            },
            {
              title: "相声评书",
              num: '3',
              path: "/Two_youshengshu_one"
            },
            {
              title: "儿童",
              num: '4',
              path: "/Two_hot_one"
            },
            {
              title: "人文",
              num: '5',
              path: "/Two_youshengshu_one"
            },
            {
              title: "历史",
              num: '6',
              path: "/Two_hot_one"
            },
            {
              title: "音乐",
              num: '7',
              path: "/Two_youshengshu_one"
            },
            {
              title: "教育培训",
              num: '8',
              path: "/Two_hot_one"
            },
            {
              title: "外语",
              num: '9',
              path: "/Two_youshengshu_one"
            },
            {
              title: "娱乐",
              num: '10',
              path: "/Two_hot_one"
            },
            {
              title: "情感生活",
              num: '11',
              path: "/"
            },
            {
              title: "商业财经",
              num: '12',
              path: "/"
            },
            {
              title: "头条",
              num: '13',
              path: "/"
            },
            {
              title: "健康养生",
              num: '14',
              path: "/"
            },
            {
              title: "广播剧",
              num: '15',
              path: "/"
            },
            {
              title: "戏曲",
              num: '16',
              path: "/"
            },
            {
              title: "IT科技",
              num: '17',
              path: "/"
            },
            {
              title: "旅游",
              num: '18',
              path: "/"
            },
            {
              title: "影视",
              num: '19',
              path: "/"
            },
            {
              title: "时尚生活",
              num: '20',
              path: "/"
            }
          ],
          hotlist:[
            {
              ico:'./data/src/assets/images/paihang/img_rank_first_4dd5bad.png',
              images:'./data/src/assets/images/paihang/wKgPEl6pH-Cgr99NAADitw9L7yU784.jpg!op_type=3&columns=144&rows=144&magick=webp',
              title:'热点新鲜播',
              des:'',
              play:'6.92亿',
              listen:'5001'
            },
            {
              ico:'./data/src/assets/images/paihang/img_rank_second_977bd19.png',
              images:'./data/src/assets/images/paihang/wKgLdlx85JXBftlwAAOoich20QI573.png!op_type=3&columns=144&rows=144&magick=webp',
              title:'权威发布',
              des:'关注国务 关注民生',
              play:'13.34亿',
              listen:'148'
            },
            {
              ico:'./data/src/assets/images/paihang/img_rank_third_1a96b0c.png',
              images:'./data/src/assets/images/paihang/wKg5Il7gnvTQf-7MAAJizv68v_s462.jpg!op_type=3&columns=144&rows=144&magick=webp',
              title:'财经快讯60秒',
              des:'财经新视野 ！一定要听的财经头条',
              play:'4.15亿',
              listen:'3305'
            }
          ]
        }
      },
      methods:{
        changeborder(a){
          this.num=a;
          console.log(this.num);
        }
      }
      // ,
      // mounted() {
      //   var _this=this;
      //   this.$http.get('./data/paihang.json')
      //     .then((response)=>{
      //       //成功之后的
      //       // console.log(response);
      //       console.log(response.data);
      //     })
      //     .catch(function (err) {
      //       //失败的
      //       console.log(err);
      //     })
      //     .then(function () {
      //       //总会执行的
      //       //always executed
      //     })
      // }
    }
</script>

<style scoped>
  /*  竖版导航*/
  .biaosheng{
    display: flex;
    flex-wrap: nowrap;
    /*border: 1px solid gold;*/
  }
  .biaosheng .align{
    display: flex;
    flex-wrap: nowrap;
    width: 20%;
    flex-direction: column;
    height: 700px;
    overflow-y: auto;
    /*border:1px solid red;*/
  }
  .biaosheng .align::-webkit-scrollbar{
    display: none;
  }
  .biaosheng .align li{
    height: 50px;
    line-height: 50px;
    text-align: center;
    background-color: #F3F4F5;
    border-bottom: 1px solid #EBEBEB;
    flex-shrink: 0;
  }
  .biaosheng .align li>a{
    color: #72727b;
    font-size: 14px;
  }
  .biaosheng .align .current{
    color: #f86442;
    background-color: #FFFFFF;
    border-left: 5px solid #F86442;
  }
</style>
